<!--
 * @Description: answerCenter -- 问答中心
 * @Author: your name
 * @Date: 2024-03-26
 * @LastEditTime: 2024-03-26
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="answerCenter">
    <div class="banner_t">
      <h1>你提问，融跃名师来为你解答！</h1>
      <div class="question_box">
        <div class="question_t">
          <span>请选择科目：</span>
          <div class="tiwenList">
            <span
              :class="{ thactive: index == kemuActive }"
              v-for="(item, index) in subjectList"
              :key="item.id"
              @click="kemuActiveFn(item, index)"
            >
              {{ item.name }}
            </span>
          </div>
        </div>
        <div class="question_tit">
          <span>问题描述：</span>
          <el-input
            type="textarea"
            placeholder="请填写您的问题描述"
            v-model="problem_text"
            maxlength="200"
            rows="3"
            show-word-limit
          >
          </el-input>
        </div>

        <div class="question_tit">
          <span>详情描述：</span>
          <el-input
            type="textarea"
            placeholder="请填写您的问题描述"
            v-model="details_text"
            maxlength="200"
            rows="3"
            show-word-limit
          >
          </el-input>
        </div>

        <div class="img_box question_tit">
          <span>上传图片：</span>
          <div class="img_list">
            <div class="list_box">
              <el-upload
                class="upload_t"
                ref="upload"
                action="https://rongyue.rongyuejiaoyu.com/api/v1.common/upload"
                list-type="picture-card"
                :limit="3"
                :on-success="handleAvatarSuccess"
                :on-preview="imgPreview"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </div>

        <el-button type="danger" size="medium" @click="submitQuestions()">
          提交
        </el-button>
      </div>
    </div>

    <!-- 缩略图展示 -->
    <el-dialog :visible.sync="wd_preview_show">
      <img width="100%" :src="wd_preview_img" alt="缩略图" />
    </el-dialog>

    <!-- 问题搜索 -->
    <div class="seach_box heart_w">
      <div class="search_input">
        <input
          type="text"
          placeholder="请输入关键字搜索"
          name="searchval"
          class="searchval"
          v-model="input_problem"
        />
        <a href="javascript:void(0);" @click="problem_search">确定</a>
      </div>
    </div>

    <!-- 问题选择 -->
    <div class="question_choose heart_w">
      <div class="question_ku">
        <ul id="select1">
          <p>问题状态：</p>
          <li
            v-for="(item, i) in typeList"
            :key="item.id"
            @click="problemSta(item, i)"
          >
            <a
              href="javascript:void(0);"
              :class="{ li_active: problemStatus == i }"
            >
              {{ item.name }}
            </a>
          </li>
        </ul>

        <div class="overfl">
          <p class="lt_title">高级筛选：</p>
          <div class="new_subject">
            <a
              href="javascript:void(0);"
              :class="{ active: filterVal == index }"
              v-for="(item, index) in cateDate"
              :key="item.id"
              @click="advancedFiltering(item, index)"
            >
              {{ item.name }}
            </a>
            <!-- <a
              href="/question/question/wholenet_answer/cid/3577/question_cate/9178/is_reply/"
            >
              【2021.11】FRM一级机考模拟考试
            </a>
            <a
              href="/question/question/wholenet_answer/cid/3577/question_cate/8823/is_reply/"
              class=""
            >
              【直播】模拟机考全景解析
            </a>
            <a
              href="/question/question/wholenet_answer/cid/3577/question_cate/8822/is_reply/"
              class=""
            >
              【直播】提分冲刺秘训
            </a> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 问题详情+热门回答 -->
    <div class="container heart_w">
      <div class="container_left">
        <ul>
          <li v-for="it_qu in qustionList" :key="it_qu.id">
            <router-link to="detailsAnswer" target="_blank">
              <div class="resolved">
                <span>1</span>
                <br />
                <span>{{ it_qu.status_text }}</span>
              </div>
              <div class="howmany_look">
                <span>{{ it_qu.views }}</span>
                <br />
                <span>浏览</span>
              </div>
              <div class="ques_content">
                <p>
                  156****1394&nbsp;&nbsp;&nbsp;&nbsp;{{ it_qu.createtime }}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </p>
                <p>{{ it_qu.title }}</p>
              </div>
            </router-link>
          </li>
        </ul>

        <!-- 分页器 -->
        <div class="page_t">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            layout="prev, pager, next, jumper"
            :total="total"
            :page-sizes="[5, 10, 15, 18]"
            :page-size="pageSize"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getQuestion,
  getQustionList,
  getSubjeck,
  getAddProblem
} from '@/api/consult/question.js'

export default {
  name: 'answerCenter',
  data() {
    return {
      wd_preview_show: false, // 控制打开变量
      wd_preview_img: '', // 缩略图文件
      imageUrl: '',
      problem_text: '', // 问题
      details_text: '', // 详情描述
      total: 50,
      problemStatus: 0,
      kemuActive: 0,
      filterVal: 0,
      status_val: 1, // 状态
      type_pro: 1, // 筛选
      input_problem: '',
      subjectList: [],
      idS: 1,
      qustionList: [],
      typeList: [],
      cateDate: [],
      filelist: [], // 文件上传列表
      currentPage: 1, // 当前页码默认值为1
      pageSize: 18 // 每页显示条数默认值为10
    }
  },
  created() {
    this.QuestionListFn()
    this.getSubData()
  },
  mounted() {
    document.querySelector('.upload_t')
  },
  methods: {
    async getSubData() {
      const { data: data } = await getSubjeck({ cid: '' })
      this.subjectList = data.data
    },
    async QuestionListFn() {
      const { data: data } = await getQuestion()
      this.typeList = data.data.type
      this.cateDate = data.data.cate
      this.getQAList()
    },
    kemuActiveFn(item, index) {
      this.kemuActive = index
      this.idS = item.id
    },
    async getQAList() {
      let params_t = {
        cate_id: '',
        keywords: this.input_problem,
        type_id: this.type_pro,
        page: 1,
        cid: 0
      }
      const { data: data_l } = await getQustionList(params_t)
      this.qustionList = data_l.data.list
    },
    async problemSta(it, i) {
      this.problemStatus = i
      this.status_val = it.id

      let params_t = {
        cate_id: it.id,
        keywords: this.input_problem,
        type_id: this.type_pro,
        page: 1,
        cid: 0
      }
      this.getQAList(params_t)
    },
    async advancedFiltering(it, index) {
      this.type_pro = it.id
      this.filterVal = index
      let params_t = {
        cate_id: this.status_val,
        keywords: this.input_problem,
        type_id: it.id,
        cid: 0,
        page: 1
      }
      this.getQAList(params_t)
    },
    problem_search() {
      let params_t = {
        cate_id: this.status_val,
        keywords: this.input_problem,
        type_id: this.type_pro,
        cid: 0,
        page: 1
      }
      this.getQAList(params_t)
    },
    async submitQuestions() {
      let params = {
        title: this.problem_text,
        content: this.details_text,
        images: this.imageUrl,
        file: '',
        level_id: '',
        sid: this.idS
      }
      if (this.problem_text !== '' && this.details_text !== '') {
        const { data: data } = await getAddProblem(params)
        if (data.code == 1) {
          this.getQAList()
          this.refreshT()
          this.$message.success(data.msg)
        }
      } else {
        this.$message.warning({
          type: 'warning',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--warning',
          message: '问题描述不能为空！'
        })
      }
    },
    //切换分页大小
    handleSizeChange(size) {
      this.pageSize = size
      // 调用函数
    },
    //切换分页
    handleCurrentChange(current) {
      this.currentPage = current
      console.log('当前页', current)
    },
    imgPreview(file) {
      this.wd_preview_img = file.url
      this.wd_preview_show = true
      console.log(file)
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.imageUrl = res.data.fullurl
      console.log(res)
    },
    handleRemove(file) {
      this.filelist.pop()
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          fileList.length
        } 个文件，共选择了 ${fileList.length + files.length} 个文件`
      )
    }
  }
}
</script>

<style lang="scss">
body,
html,
#app {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
@import '@/assets/styles/answerCenter.scss';
</style>
